<template>
  <div>watchEffect：面试题：{{ count }}</div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(1);
const num = ref(100);

// 组件一加载，就会立即执行watchEffect的回调函数
// watchEffect里面使用过的响应式数据发生了改变，就会执行回调函数
// 与watch相比，不需要固定的指定要监听的数据，初始化的时候会自动执行一遍，不需要指定immediate
watchEffect(() => {
  // 当回调函数里面 有响应式数据发生了改变，就会自动指向这个回调函数
  console.log('watcheffect回调函数', count.value, num.value);
});

setTimeout(() => {
  count.value++;
}, 2000);

setTimeout(() => {
  num.value++;
}, 4000);
</script>
